
<template>
  <div class="app-container action-account-container">
    <div class="back-content flex-normal">
      <span class="back-icon el-icon-back" @click="$router.go(-1)"></span>
      <span class="back-label">账户开户</span>
    </div>
    <div class="app-dialog www">
      <el-form
        class="form-content"
        ref="staff-form" label-position="left"
        :model="currentItem"
        label-width="120px">
        <div class="form-warning">
          <span class="warning-txt">系统已向您如下银行支付一笔小额支付，请在如下金额验证处，输入该金额</span>
        </div>
        <div class="form-title">打款验证</div>
        <el-form-item class="form-content-item" label="收款银行账户：">
          <div class="form-val no-border flex-normal">
            <span class="val-txt">南京车多多公司</span>
          </div>
        </el-form-item>
        <el-form-item class="form-content-item" label="开户行：">
          <div class="form-val no-border flex-normal">
            <span class="val-txt">建设银行南京市晓庄分行</span>
          </div>
        </el-form-item>
        <el-form-item class="form-content-item" label="银行账号：">
          <div class="form-val no-border flex-normal">
            <span class="val-txt">829992992929292992</span>
          </div>
        </el-form-item>
        <el-form-item class="form-content-item" label="开户行所在地：">
          <div class="form-val no-border flex-normal">
            <span class="val-txt">江苏省 南京市</span>
          </div>
        </el-form-item>
        <div class="form-title">金额验证</div>
        <el-form-item class="form-content-item"
            label="收到的金额：" prop="name5"
            :rules="{ required: true, message: `金额不能为空`, trigger: 'blur'}">
            <div class="form-val flex-normal">
              <el-input v-model="currentItem['name5']" placeholder="请输入收到的金额"></el-input>
            </div>
        </el-form-item>
      </el-form>
      <div class="check-warning flex-normal">
        <i class="desc-icon el-icon-info"></i>
        <span class="desc-txt">请输入对公银行卡收到的金额</span>
      </div>
      <div class="btn-container flex-normal">
        <div class="btn-item submit flex-center" @click="showDialog('check')">
          <span class="btn-txt">提交验证</span>
        </div>
      </div>
    </div>
    <dialog-normal
      ref="dialog-check"
      :dialog-prop="{
          title: '打款验证',
      }">
      <template #dialog-content>
        <div class="dialog-warning flex-column">
          <template v-if="status == 'success'">
            <svg-icon class="icon" icon-class="check-success"></svg-icon>
            <span class="warning-txt">验证成功，3s后返回账户中心</span>
          </template>
          <template v-if="status == 'fail'">
            <svg-icon class="icon" icon-class="check-fail"></svg-icon>
            <span class="warning-txt">验证失败，请重新输入金额</span>
          </template>
        </div>
      </template>
    </dialog-normal>
  </div>
</template>

<script>
// import {
//   getLandList, delLand
// } from "@/api/plotManage/index";
export default {
  components: {
    "dialog-normal": () => import("@/rhComponents/dialog/normal-dialog")
  },
  data() {
    return {
      status: 'fail',
      cardList: [
        {label: '招商银行', icon: 'zsyh-logo', name: 'zsyh'},
        {label: '建设银行', icon: 'zsyh-logo', name: 'jsyh'},
        {label: '农业银行', icon: 'zsyh-logo', name: 'nyyh'},
      ],
      currentItem: {},
      warningList: [
        '如需充值，请使用手机银行或者网银，打款至存管账户',
        '存管账户转账仅限于工作日工作时间请安排好打款时间；',
        '转账充值操作必须使用与存管账户的同名账户，不支持非同名账户转账；',
        '服务过程中，如果有任何疑问，可致电客服：<br />400-810-0049反馈',
      ],
    };
  },
  mounted(){
    let _self = this
    // _self.initGetDicts()
    // _self.getList()
  },
  methods: {
    showDialog(ref) {
      let _self = this;
      _self.$nextTick(() => {
        _self.$refs[`dialog-${ref}`].showDialog = true
      })
    },
  }
};
</script>
<style scoped lang="scss">
.back-content{
  padding: vh(25) vw(30);
  .back-icon{
    font-size: vh(26);
    cursor: pointer;
  }
  .back-label{
    margin-left: vw(20);
    font-size: 13px;
    color: #3D3D3D;
  }
}
.action-account-container {
  min-height: calc(100vh - 80px);
  .form-warning{
    padding: vh(10);
    border-radius: vh(6);
    background: #fdf6ec;
    display: inline-flex;
    .warning-txt{
      font-size: 13px;
      color: #e6a23c;
    }
  }
  .check-warning{
    padding-left: vw(20);
    .desc-icon{
      color: #F7B212;
    }
    .desc-txt{
      margin-left: vw(10);
      font-size: vh(12);
      color: #7F7F7F;
    }
  }
  .www{
    padding: 0 vw(30);
    .form-content-item {
      position: relative;
    }
    .form-title{
      margin-top: vh(30);
      margin-bottom: vh(20);
      line-height: vh(34);
      font-size: vh(16);
      color: #0003AA;
    }
    .form-val {
      width: vw(360);
      flex-wrap: nowrap;
      &.no-border{
        border: none;
      }
    }
  }
  .btn-container{
    padding-left: vw(30);
    margin-top: vh(80);
    .btn-item{
      height: vh(46);
      border-radius: vh(3);
      padding: 0 vw(60);
      margin-left: vw(110);
      &.submit{
        cursor: pointer;
        background-color: #0003AA;
        .btn-txt{
          color: #fff;
        }
      }
      .btn-txt{
        font-size: vh(16);
      }
    }
  }
  .dialog-warning{
    align-items: center;
    margin-top: vh(80);
    .icon{
      width: vh(95);
      height: vh(95);
    }
    .warning-txt{
      color: #3D3D3D;
      font-size: 13px;
      margin-top: vh(30);
    }
  }
}
</style>